<template>
	<layout>
		<div class='wrapper'>
			<van-form @submit="onSubmit" class="form">
				<van-field
					class="cardType"
					name="cardType"
					label="身份证类型">
					<template #input>
						<van-radio-group
							v-model="formData.cardType"
							direction="horizontal"
							>
							<van-radio :name="1">大陆</van-radio>
							<van-radio :name="2">非大陆</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field
					name="idCard"
					:label="cardExplain"
					required
					v-model="formData.idCard"
					:placeholder="'请输入'+cardExplain"
					:rules="[{required:true,message:'请输入'+cardExplain},{validator:validateIdCard,message:cardExplain+'格式错误'}]"
					>

				</van-field>

				<van-field
					name="beginTime"
					label="开始日期"
					clearable
					clear-trigger="always"
					v-model="formData.beginTime"
					placeholder="请选择开始日期"
					@click="beginTimePickerVisible=true"
					>

				</van-field>
				<van-field
					name="endTime"
					label="结束日期"
					clearable
					clear-trigger="always"
					v-model="formData.endTime"
					placeholder="请选择结束日期"
					@click="endTimePickerVisible=true"
					>

				</van-field>
				<div class="tip">
					提示:若不选日期，默认查询7日内的数据
				</div>
				<div class="btn">
					<van-button block type="info" round native-type="submit">确 认</van-button>
				</div>
			</van-form>
			<!--<div class="botton-tip">
				温馨提示：若24小时内，仍无法查找到数据，请联系我们！客服热线：400-1512-686
			</div>-->
		</div>



		<!-- 开始日期弹框  -->
		<van-popup v-model="beginTimePickerVisible" position="bottom" round>
			<van-datetime-picker
				title="选择时间"
				:value="currentDate"
				@cancel="beginTimePickerVisible = false"
				@confirm="confirmBeginTime"
				type="date"
				>

			</van-datetime-picker>
		</van-popup>
		<van-popup v-model="endTimePickerVisible" round position="bottom">
			<van-datetime-picker
				title="选择时间"
				:value="currentDate"
				@cancel="endTimePickerVisible = false"
				@confirm="confirmEndTime"
				type="date"
				>


			</van-datetime-picker>
		</van-popup>
	</layout>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
	name:"searchReport",
	// import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		// 这里存放数据
		return {
			cardExplain:"身份证",
			// 开始日期选择弹框
			beginTimePickerVisible:false,
			// 结束日期选择弹框
			endTimePickerVisible:false,
			// 当前时间
			currentDate:new Date(),
			formData:{
				cardType:1,
				idCard:"",
				beginTime:"",
				endTime:"",
			}
		}
	},
	// 监听属性 类似于data概念
	computed: {},
	// 监控data中的数据变化
	watch: {
		"formData.cardType"(type){
			if(type==1){
				this.cardExplain = "身份证"
			}else{
				this.cardExplain = "证件号"
			}
		}
	},
	// 方法集合
	methods: {
		// 身份证校验
		validateIdCard(value){
			// 校验的时候把空格给去掉
			value= value.replace(/\s/g,"")
			this.formData.idCard = value
			if(this.formData.cardType==1&&value.length!=18) return false

			if(this.formData.cardType==1&&value.length==18){
				let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if(!reg.test(value)) return false
			}

			if(this.formData.cardType==2&&value.length!=15) return false
		},
		// 选择开始时间的确认
		confirmBeginTime(value){
			let date = new Date(value)
			let month = date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1
			let day = date.getDate()<10?'0'+date.getDate():date.getDate()
			this.formData.beginTime = date.getFullYear()+"-"+month+"-"+day
			this.beginTimePickerVisible = false
		},
		// 选择结束时间的确认
		confirmEndTime(value){
			let date = new Date(value)
			let month = date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1
			let day = date.getDate()<10?'0'+date.getDate():date.getDate()
			this.formData.endTime = date.getFullYear()+"-"+month+"-"+day
			this.endTimePickerVisible = false
		},
		onSubmit(){
			let beginTime = new Date(this.formData.beginTime)
			let endTime = new Date(this.formData.endTime)

			if(beginTime>endTime){
				this.$dialog.alert({
					title:"提示",
					message:"开始日期不能大于结束日期"
				})
				return
			}

			console.log(this.formData.idCard,this.formData.beginTime,this.formData.endTime)
			this.$router.push({
				path:"reportList",
				query:{
					code:this.formData.idCard,
					beginTime:this.formData.beginTime,
					endTime:this.formData.endTime,
				}
			})
		}
	},
	// 生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	// 生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {

	},
	beforeCreate() { }, // 生命周期 - 创建之前
	beforeMount() { }, // 生命周期 - 挂载之前
	beforeUpdate() { }, // 生命周期 - 更新之前
	updated() { }, // 生命周期 - 更新之后
	beforeDestroy() { }, // 生命周期 - 销毁之前
	destroyed() { }, // 生命周期 - 销毁完成
	activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
	.wrapper{
		width: 93%;
		margin: auto;
		.form{
			box-sizing: border-box;
			border-radius: 10px;
			background-color: white;
			box-shadow: 0 0 12px rgba(0,0,0,10%);
			padding: 10px;
			.card-type{
				font-size: 12px;
				&::v-deep .van-icon{
					font-size: 10px;
					transform: translateY(.1rem);
				}

			&::v-deep .van-radio__icon {
				padding-bottom: 2px;
			}
			}
			.tip{
				text-align: center;
				font-size: 12px;
				color: red;
				margin:10px auto;
			}
			.btn{
				margin: 20px;
			}
		}

		.botton-tip{
			margin-top: 12px;
			font-size: 12px;
			color: red;
			line-height: 24px;
			text-indent: 24px;
		}
	}
</style>
